<template>
    <section class="collect_datadb_form">
  		<el-form ref="form" :model="datadbForm" label-width="106px" class="second_form">
			<el-form-item label="数据源名称">
				<el-select filterable  v-model="form.connDatasourceId"  placeholder="请选择">
					<el-option
						v-for="item in FTPData"
						:key="item.id"
						:label="item.name"
						:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="数据来自 " required  v-if="inputOrOutput==='laiyuan'">
				<el-radio class="first_radio" v-model="datadbForm.wenjianOrftp" label="1" @change="shujulaizi='1'">查询的视图/单表名称</el-radio>
				<el-radio class="first_radio" v-model="datadbForm.wenjianOrftp" label="2" @change="shujulaizi='2'">自定义SQL</el-radio>

				<el-form-item label="选择表名" v-show="shujulaizi==='1'" required >
					<el-select placeholder="请选择" v-model="zhiDuanName" @change="selectFormSql">
						<el-option
							v-for="item in DatabaseTableData"
							:key="item.id"
							:label="item.name"
							:value="item.id"
							>
						</el-option>
					</el-select>
            	</el-form-item>	
				<el-input v-show="shujulaizi==='2'" v-model="form.sql" placeholder="请输入sql语句" type="textarea"></el-input>
			</el-form-item>

			<el-form-item label="采集方式" required  v-if="inputOrOutput==='laiyuan'">
				<el-radio class="first_radio" v-model="datadbForm.gatherMode"  label="2">全部采集</el-radio>
				<el-radio class="first_radio" v-model="datadbForm.gatherMode"  label="1"  >增量采集</el-radio>
				<el-form-item v-if="datadbForm.gatherMode==='1'" label="增量字段">
					<el-select placeholder="请选择" v-model="datadbForm.columnName">
						<el-option
							v-for="item in fieldName"
							:label="item.name"
							:key="item.id"
							:value="item.name">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item v-if="datadbForm.gatherMode==='1'" label="字段索引" style="margin-top:10px;">
					<el-input v-model="datadbForm.columnIndex" style="width: 50%;">
					</el-input>
				</el-form-item>
				<el-form-item v-if="datadbForm.gatherMode==='1'" style="margin-top:10px;" label="抽取条件">
					<el-input v-model="datadbForm.sqlWhere"
						placeholder="输入where表达式格式:{where字符开头}{其中包含变量$LASTMAXVALUE(整数和时间字段统一转成长整形long)}">
					</el-input>
				</el-form-item>
			</el-form-item>

			<el-form-item label="数据来自 " required  v-if="inputOrOutput==='mudi'">
				<!-- <el-input  v-model="form.sql" placeholder="请输入sql语句" type="textarea"></el-input> -->
				<el-radio class="first_radio" v-model="datadbForm.autoName" label="1" @change="mudiTable='1'">指定表</el-radio>
				<el-radio class="first_radio" v-model="datadbForm.autoName" label="2" @change="mudiTable='2'">新建表</el-radio>
				<el-form-item label="选择表名" v-show="mudiTable==='1'" required >
					<el-select placeholder="请选择" v-model="zhiDuanName" @change="selectFormSql">
						<el-option
							v-for="item in DatabaseTableData"
							:key="item.id"
							:label="item.name"
							:value="item.id"
							>
						</el-option>
					</el-select>
            	</el-form-item>	
				<el-form-item label="填写新建表名" v-show="mudiTable==='2'">
					<el-input></el-input>
				</el-form-item>
			</el-form-item>

			<el-form-item label="数据匹配" style="margin-bottom: 0px;">
			</el-form-item>
			<el-table
				:data="dataPiPeiTableData"
				style="width: 100%;"
				>

				<el-table-column
					align="center"
					label="序号"
					type="index"
					>
					
				</el-table-column>

				<el-table-column
					align="center"
					label="字段名"
					>
					<template slot-scope="scope">
						<el-input v-model="scope.row.tickName" placeholder=""></el-input>
					</template>
				</el-table-column>	
						
				<el-table-column
					align="center"
					label="中文名"
					>
					<template slot-scope="scope">
						<el-input v-model="scope.row.chineseName" placeholder=""></el-input>
					</template>
				</el-table-column>	
										 		
				<el-table-column
					align="center"
					:label="tableDataName"
					style="width:100px"
					>
					<template slot-scope="scope">
						<el-select v-model="scope.row.yuanData" placeholder="请选择" @change="chooseYuanData" style="width: 160px;">
							<el-option
								v-for="item in wenjianFormYuanDataOptions"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							</el-option>
						</el-select>
					</template>
				</el-table-column>

				<el-table-column
					width="50"
					label="插入">
					<template slot-scope="scope">
						<i class="el-icon-circle-plus-outline" @click="addFormData(scope)"></i>
					</template>
				</el-table-column>	       
				<el-table-column
					width="60"
					label="上移">
					<template slot-scope="scope">
						<i class="el-icon-arrow-up" @click="moveUp(scope.$index,dataPiPeiTableData.length)"></i>
					</template>
				</el-table-column>	       
				<el-table-column
					width="50"
					label="下移">
					<template slot-scope="scope">
						<i class="el-icon-arrow-down" @click="moveDown(scope.$index,dataPiPeiTableData.length)"></i>
					</template>
				</el-table-column>	       
				<el-table-column
					align="center"
					width="50"
					label="删除"
					>
					<template slot-scope="scope">
						<i class="el-icon-delete" @click="delFormData1(scope)"></i>
					</template>
				</el-table-column>		
			</el-table>
						
			<!-- <el-button type="primary" style="margin-top: 15px;" @click="adddataPiPeiTableData">添加</el-button> -->
			
  		</el-form>
    </section>
</template>

<script>
    import {
    	componentGetYuanData2Type,
		componentGetFTPData,
		computedGetValue,
		computedGetTable,
    } from "../../common/js_css_img/serverResourceComputed"
    export default {
    	components:{
    	},
    	props:{
    		timeSubmit :Boolean,
    		resourceWeb:Number,
			inputOrOutput:"",
			tableDataName: String,
			tableNameDb: String,
    		secondFormDBdataForm:{
    			type:Object,
    			 default: function () {
			   	 	return {}
			  	}
    		},
    		thirdFormDBdataForm:{
    			type:Object,
    			 default: function () {
			   	 	return {}
			  	}
			},
			inViewSQLSubmitButton: Boolean,	//查看建表SQL语句的按键状态，触发事件
    	},
        data() {
          	return {
				shujulaizi:"1",
				mudiTable: "1",
				sqlTimeOutwenjian:false,
				sqlTimeOutjiekou:false,
				createdSqlwenjian:'',
				createdSqlJiekou:'',
				SQLdialogVisibleWenjian:false,
				SQLdialogVisibleJiekou:false,
				sqLradio:'',
				checked1:false,
				checked2:false,
				outPutTabletimeOut:false,
				outPutTabletimeOut2:false,
				activeName2:'first',
				checkRule:["","=","<",">","<=",">="],
				zhiDuanName: "",
				DatabaseTableData: [],
				fieldName: [],
				form:{ /*数据表的来源和输出都是这里的*/
					"type":3,
					"connDatasourceId":"", 
					"filePath":"",
					"fileName":"文件",
					"sql":"",
					"outputDataFormList":[
						
					],
					"inputDataFormList":[ 
							
					],
				},
				datadbForm:{
					dataOriginName:'',
					backData:[],
					wenjianType:[],
					backAdress:'',
					backAdressInput:'',
					sql:'',
					formName:'',
					wenjianOrftp: "1",
					gatherMode: "2",
					columnName: "",
					sqlWhere: "",
					columnIndex:"",
					autoName: "1",
				},
				FTPData:[
					
				],
				dataPiPeiTableData:[
					
				],
				wenjianFormYuanDataOptions:[],

				wenjianFormTable1Data:[],
				inDataSourceObj: {},	//来源数据源对象，来源数据库的连接源的表的id和来源数据源的字段集合
          	};
        },
        methods: {
			delFormData1(scope){
				this.dataPiPeiTableData.splice(scope.$index,1);
			},
			addFormData(scope){
				this.dataPiPeiTableData.splice(scope.$index+1,0,
					{
						yuanData:"",
						chineseName:'',
						tickName: '',
						id:'',
					}
				);
				for(let i = 0; i<this.dataPiPeiTableData.length; i++){
					this.dataPiPeiTableData[i].id = i;
				}
			},
			moveArray(index1,index2){
				console.log(this.dataPiPeiTableData)
				let arr = this.dataPiPeiTableData;
				arr[index1] = arr.splice(index2, 1, arr[index1])[0];
				// this.dataPiPeiTableData[index1] = this.dataPiPeiTableData.splice(index2, 1, this.dataPiPeiTableData[index1])[0];
				this.dataPiPeiTableData = [];
				this.dataPiPeiTableData = arr;
			},
			moveDown(index,length){
				if(index+1 != length){
					this.moveArray(index, index+1);
				}else{
					this.$message('已经处于置顶，无法下移');
				}
			},
			moveUp(index,length){
				if(index!= 0 ){
					this.moveArray(index, index-1);
				}else{
					this.$message('已经处于置顶，无法上移');
				}
			},
			chooseYuanData(val){
				if(this.inputOrOutput==='laiyuan'){
					/*插入到vuex，为下面去领取*/
					let pushYuanData = this.forYuanData(val);
					this.$store.commit('pushYuanData', pushYuanData);
				}
			},
			outPutTableData(val){
			},
			adddataPiPeiTableData(yuanDataName,id){
				console.log(typeof yuanDataName);
				// if((typeof yuanDataName)===string)
				this.dataPiPeiTableData.push(
					{
						yuanData:"",
						chineseName:'',
						tickName: (typeof yuanDataName)==="string" ? yuanDataName : '',
						id:id,
					}
				)
			},
			forYuanData(val){/*循环挑选元数据*/
				let param={};
				for(let i in this.wenjianFormYuanDataOptions){
					if(this.wenjianFormYuanDataOptions[i].id ===val){
						param = this.wenjianFormYuanDataOptions[i];
						break;
					}
				}
				return param
			},
			selectFormSql(val){
				let obj = {};
				obj = this.DatabaseTableData.find((item) => {
					return item.id == val;
				});
				this.form.sql = obj.name;
			},
        },
        mounted(){
			if(this.inputOrOutput==='laiyuan'){
				componentGetYuanData2Type(this,{isPageAble: false},1);/*获取采集类的元数据*/
        	}else if(this.inputOrOutput==='mudi'){
				this.wenjianFormYuanDataOptions = this.$store.state.collectServer.yuanData;
			}
			// this.zhiDuanName = this.tableNameDb;
        },
        watch:{
        	resourceWeb(newVal){
        		componentGetFTPData(this,3,newVal);/*数据源选择*/
        	},
        	timeSubmit(newVal){
        		if(this.inputOrOutput==='laiyuan'){
        			this.form.outputDataFormList=[];
        			for (let i in this.dataPiPeiTableData){
	        			this.form.outputDataFormList.push(
	        				{
	        					"key":this.dataPiPeiTableData[i].tickName,
								"name":this.dataPiPeiTableData[i].chineseName,
								"metaDataId":this.dataPiPeiTableData[i].yuanData,
								"order":i,
	        				}
	        			)
        			}
        		}
				if(this.inputOrOutput==='mudi'){
					this.form.inputDataFormList = [];
        			for (let i in this.dataPiPeiTableData){
	        			this.form.inputDataFormList.push(
	        				{
	        					"key":this.dataPiPeiTableData[i].tickName,
								"name":this.dataPiPeiTableData[i].chineseName,
								"metaDataId":this.dataPiPeiTableData[i].yuanData,
								"position":i
	        				}
	        			)
        			}
        		}
				this.$emit("outPutForm",this.form);
				this.$emit("outPutdatadbForm",this.datadbForm);
			},
			inViewSQLSubmitButton(){
				this.inDataSourceObj.outputDataFormList=[];
				for (let i in this.dataPiPeiTableData){
					this.inDataSourceObj.outputDataFormList.push(
						{
							"key":this.dataPiPeiTableData[i].tickName,
							"order":i,
						}
					)
				}
				this.$emit("InGentableSql",this.inDataSourceObj)	//获得来源数据源对象
				console.log(this.inDataSourceObj);
			},
        	secondFormDBdataForm:{
        		handler(newVal,oldVal){
        			if(newVal.type==='3'){
        				this.form.connDatasourceId = newVal.connDatasourceId
	        			for(let i in  newVal.outputDataFormList){
	        				this.dataPiPeiTableData.push(
	        					{
	        						yuanData:newVal.outputDataFormList[i].metaDataId,
					          		chineseName:newVal.outputDataFormList[i].name,
					          		tickName:newVal.outputDataFormList[i].key,
	        					}
	        				)
	        			}
	        			this.form.sql = newVal.sql;
        			}
        		},
        		deep:true
        	},
        	thirdFormDBdataForm:{
        		handler(newVal,oldVal){
        			if(newVal.type==='3'){
        				this.form.connDatasourceId = newVal.connDatasourceId
	        			for(let i in  newVal.outputDataFormList){
	        				this.dataPiPeiTableData.push(
	        					{
	        						yuanData:newVal.outputDataFormList[i].metaDataId,
					          		chineseName:newVal.outputDataFormList[i].name,
					          		tickName:newVal.outputDataFormList[i].key,
	        					}
	        				)
	        			}
	        			this.form.sql = newVal.sql;
        			}
        		}
			},
			form: {
                handler(newVal,oldVal){
                    //数据库查询表操作
					computedGetTable(this,newVal.connDatasourceId);
					
                },
                deep: true
            },
			zhiDuanName(newVal){
                //数据库查询表字段操作
                this.dataPiPeiTableData = []
                console.log(newVal);
				computedGetValue(this,newVal);
				this.inDataSourceObj.inConnDatasourceTableId = newVal;	//来源表ID的变化赋值
			},
			datadbForm: {
				handler(newVal){	//选择了自定义SQL语句，清空字段
					console.log(newVal);
					if(newVal.wenjianOrftp==2){
                    	this.dataPiPeiTableData = [];
                	}
				},
				deep: true
			},
			sqLradio(newVal){   //选择了自定义SQL语句，清空字段
                if(newVal==2){
                    this.dataPiPeiTableData = [];
                }
			},
			dataPiPeiTableData:{
				handler(newVal){
					this.$emit('sourceField',newVal);	//来源字段列表
				},
				deep: true,
			},
			datadbForm:{
				handler(val){
					console.log(val.columnName)
					val.sqlWhere = "where"+ val.columnName + ">" + "${"+ val.columnName+"}"
				},
				deep:true,
			},
        }
  	};
</script>

<style scoped="scoped">
	.collect_datadb_form .icon_diy{
		font-size: 20px;
		vertical-align: middle;
	}
	
	div#tab-first{
		 text-align: right !important;
	     padding-right: unset !important; 
	     margin-left: unset !important; 
	}
	
	.diy_label{
		text-align: right;
	    vertical-align: middle;
	    float: left;
	    font-size: 14px;
	    color: #606266;
	    line-height: 40px;
	    padding: 0 12px 0 0;
	    box-sizing: border-box;
	}
	

</style>